<template>
    <div>
        <div class="tit">商品管理>商品分类</div>
        <div class="addBtn">
            <el-button color="#ed742f" class="font-white" @click="gotoAdd(-1)">新建分类</el-button>
        </div>
        <div class="searchForm">
            <span class="lab">分类搜索</span>
            <el-input placeholder="请输入名称搜索" class="inp wid-180"></el-input>
            <el-button color="#ed742f" class="font-white">筛选</el-button>
            <el-button link color="#ed742f" :dark="true" class="font-main">清除</el-button>
        </div>
        <div class="classMain">
            <div class="classItem" v-for="typ in types">
                <div class="ctit font-main">{{ typ.title }}</div>
                <div class="content">
                    <div class="head">
                        <span>分类名称</span>
                        <span class="btn">操作</span>
                    </div>
                    <div class="none" v-if="typ.list.length==0">
                        该分类子分类为空...
                    </div>
                    <div class="list" v-for="item in typ.list">
                        <div :class="{item:true,active:item.active,visible:item.visible==1?false:true}" @click="activeCur(item)">
                            <span>{{ item.name }}</span>
                            <div class="btn">
                                <el-button link :dark="true" class="font-main" @click="gotoAdd(item.id)">编辑</el-button>
                                <el-button link :dark="true" class="font-main" @click="deleteById(item.id)">删除</el-button>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, reactive } from "vue";
import {useClassifyStore} from "@/store/productClassify"
import  productClassifyService  from "@/service/productClassifyService";
import {useRouter} from "vue-router"

const router = useRouter();
const store = useClassifyStore();
//三级分类 
const types = computed(()=>[
    {
        level:1,
        title:"一级分类",
        list:store.getFirstList
    },
    {
        level:2,
        title:"二级分类",
        list:store.getSecList
    },
    {
        level:3,
        title:"三级分类",
        list:store.getThirdList
    },
])
//页面加载请求数据
onBeforeMount(()=>{
    loadClassList()
})
//加载页面数据
const loadClassList=()=>{
    productClassifyService.classList().then((res:any)=>{
        //存入分组数据
        store.setClassList(res.data.data)
    })
}
//根据id删除                   删除改id 
const deleteById = (id:any)=>{
    productClassifyService.deleteById(id).then((res:any)=>{
        loadClassList()
    })
}
//激活当前分类
const activeCur = (item:any)=>{
    store.activeItem(item)
}
const gotoAdd=(id:any)=>{
    if (id==-1) {
        //新增
        router.push({path:"/addCategory"})
    }else{
        //编辑
        router.push({path:"/addCategory",query:{id:id}})
    }
    
}

</script>

<style scoped lang="less">
.tit {
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
}

.addBtn {
    padding: 20px 0;
}

.searchForm {

    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;

    .lab {
        font-size: 14px;
        padding: 20px;
    }

    .inp {
        padding-right: 20px;
    }
}

.classMain {
    width: 100%;
    min-height: 500px;
    display: flex;
    background-color: #fff;

    .classItem {
        flex: 1;
        display: flex;
        flex-direction: column;

        .ctit {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            border: 1px solid #dddddd;

        }

        .content {
            flex: 1;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            padding-top: 20px;
            display: flex;
            flex-direction: column;

            .head {
                background-color: #e3e3e3;
                align-items: center;
                display: flex;
                justify-content: space-between;
                height: 45px;

                span {
                    margin: 10px;
                }

                .btn {
                    padding: 0 35px;
                }
            }
            .none{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                
                
            }

            .list {
                
                .item {
                    border-bottom: 1px solid #dddddd;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 40px;
                    font-size: 13px;
                    span {
                        padding: 4px;
                    }

                    .btn {
                        padding: 0 20px;
                    }
                }
                .active{
                    background-color: #f2f2f2;
                    color:#ed742f;
                }
                .visible{
                    display: none;
                }
            }

        }
    }
}</style>